<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>tree2</title>
	<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
	<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js"></script>
	<link rel="stylesheet" href="lTree/css/zTreeStyle/zTreeStyle.css" />
	 <script type="text/javascript" src="js/artTemplate.js"></script>
	<script type="text/javascript" src="lTree/js/jquery.ztree.all.min.js"></script>
	<script type="text/javascript" src="lTree/ltree.js"></script>
	<link rel="stylesheet" href="style/weuix.min.css"/> 
	<link rel="stylesheet" href="lTree/css/ltree.css" />
	<!--<script src="js/picker.js"></script>-->
	<script src="js/select.js"></script>
	<script type="text/javascript" src="js/slide/slide.js"></script>
	<style>
	.weui_cell_bd p{position: relative;}
	.weui_cell_bd p input{
			margin-right: 6px;
			width: 20px;
			height: 20px;
			position: absolute;
			top: -6px;
			background: #fff;
	 
			  
		}
		.weui_cell_bd p span{
			position: absolute;
			top: -9px;
			left: 26px;
			display: inline-block;
		}
		.person  .weui_cell_ft{
			font-size: 12px;
			
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
			text-align: right;
			width: 50%;
			padding:6px 0;	


		}
		.fanhui{
			padding: 12px 12px;
			background: #fff;
		}
		.weui_cells{margin-top: 0;}
	</style>
 
</head>
<body>

<div class="weui_btn_primary weui-header "> 
		<div class="weui-header-left"> <a class="icon icon-109 f-white" href="javascript:;"  onclick="javascript:history.go(-1);" ></a>  </div>
		<h1 class="weui-header-title">选择人员</h1>
		<div class="weui-header-right"><a class=" f-white"  href="javascript:;" >完成</a></div> 
</div>

<div class="tab">
	<ul>
		<li class="focus tli">
			<a href="javascript:;" class="tabitem">常用联系人</a>

		</li>
		<li class="tli">
			<a href="javascript:;" class="tabitem">所有联系人</a>

		</li>
	</ul>

	<div class="weui_search_bar">
		<input type="search" class="search-input" id='search' placeholder='查询' style="box-sizing:content-box"/>
		<button  class="weui_btn weui_btn_mini weui_btn_primary" style="height:32px; line-height:32px;" id="searchBtn"><i class="icon icon-4"></i></button>    
	</div>


	<div class="tabcont">
		<div class="cont">
				<!-- 常用联络人开始 -->
				 <div class="weui_cells person" id="oftenItem">	 


				</div>
				<!--常用联络人结束  -->
		</div>
		<div class="cont" style="display: none">
			 <!--所有人员开始  -->
				<ul id="treeDemo" class="ztree"></ul>
			 <!--所有人员结束  -->
		</div>
		
	</div>
</div>

<style>
	body{height: 100vh; overflow: hidden;}
	.tab{}
	.tab>ul{list-style: none;background: #fff;overflow: hidden;}
	.tab>ul>li{width: 50%;text-align: center; float: left; list-style: none;overflow: hidden;}
	.tab ul li .tabitem{ text-align: center; background: #eee;  margin: 10px 10px;  display: block; padding:4px 0; color: #666; border-radius: 6px;}
	.tab>ul>li.focus a{background: #04BE02; color: #fff}
	.tabcont{
		
		background: #fff;overflow: hidden;
	}
	.cont{margin: 12px;overflow: auto;}
	.weui_search_bar{background: #fff;}

</style>
<script>
	$(".tab>ul>li").click(function(){
		var i=$(this).index();
		$(this).addClass("focus");
		$(this).siblings().removeClass("focus");

		$(".tabcont .cont").eq(i).show()
		$(".tabcont .cont").eq(i).siblings().hide(); 
	})
 	
	$(".cont").css("height",(parseInt($(window).height())-157))

</script>
<style>
	.treemenu{}
	.treemenu>li{padding: 10px 15px; list-style: none;border-bottom: 1px solid #ddd;background: #fff; display: block;line-height: initial; }
	.treemenu>li input{width: 20px;height: 20px;}
	.treemenu>li>div{}
	.treemenu>li>div .right span,.treemenu>li>ul>li>div .right span{color: #999;}


	.treemenu>li>ul{display: none;list-style: none;margin-top: 12px;}
	.treemenu>li>ul li{padding: 10px 15px; list-style: none;border-bottom: 1px solid #ddd;background: #fff; display: block;line-height: initial;padding-left:0px; padding-right:0px;margin-left: 25px }
	.treemenu>li>ul li:last-child{border: none;}

</style>
<script>
	 $(".treemenu>li").on("click",function(){
	 		$(this).find("ul").toggle();

	 });

</script>
 <script type="text/html" id="treedetail">
 		<div class="cont2" id="emplist">
 			<div class="weui_btn_primary weui-header "> 
					<div class="weui-header-left"> <a class="icon icon-109 f-white" href="javascript:;"  onclick="javascript:history.go(-1);" ></a>  </div>
					<h1 class="weui-header-title">选择人员</h1>
			</div>
 			<!-- 常用联络人开始 -->
 			<div class="weui_cells person ">
 				{{each emps as item}}
 					<div class="weui_cell">
	 					<div class="weui_cell_hd"></div>
	 					<div class="weui_cell_bd weui_cell_primary">
	 						<p><input name="people" type="checkbox" value="" data-pid="{{item.pId}}" data-positionid="{{item.positionId}}" data-type="{{item.type}}" data-name="{{item.name}}" data-email="{{item.email}}" data-phone="{{item.phone}}" data-userid="{{item.userId}}" {{getStatus(item.userId,item.positionId)}} /><span>{{item.name}}</span></p>
	 					</div>
	 					<div class="weui_cell_ft"></div>
	 				</div>
 				{{/each}}
 				
 			</div>
 			<!--常用联络人结束  -->
 		</div>
 </script>
 <!--搜索模块-->
  <script type="text/html" id="searchmodel">
 		<div class="cont2" id="searchcon">
 			<div class="weui_btn_primary weui-header "> 
					<div class="weui-header-left"> <a class="icon icon-109 f-white" href="javascript:;"  onclick="javascript:history.go(-1);" ></a>  </div>
					<h1 class="weui-header-title">选择人员</h1>
			</div>
			<div class="weui_search_bar">
				<input type="search" class="search-input" id='search2' placeholder='查询' style="box-sizing:content-box"/>
				<button  class="weui_btn weui_btn_mini weui_btn_primary" id='searchBtn2' style="height:32px; line-height:32px;"><i class="icon icon-4"></i></button>    
			</div>
 			<!-- 常用联络人开始 -->
 			<div class="weui_cells person ">
 				{{each emps as item}}
 					<div class="weui_cell">
	 					<div class="weui_cell_hd"></div>
	 					<div class="weui_cell_bd weui_cell_primary">
	 						<p><input name="people" type="checkbox" value="" data-pid="{{item.pId}}" data-positionid="{{item.positionId}}" data-type="{{item.type}}" data-name="{{item.name}}" data-email="{{item.email}}" data-phone="{{item.phone}}" data-userid="{{item.userId}}" {{getStatus(item.userId,item.positionId)}} /><span>{{item.name}}</span></p>
	 					</div>
	 					<div class="weui_cell_ft"></div>
	 				</div>
 				{{/each}}
 				
 			</div>
 			<!--常用联络人结束  -->
 		</div>
 </script>
  <!--常用联系人模块-->
  <script type="text/html" id="oftenmodel">
 		<div class="cont2" id="oftencon">
 			<!-- 常用联络人开始 -->
 			<div class="weui_cells person">
 				{{each emps as item}}
 					<div class="weui_cell">
	 					<div class="weui_cell_hd"></div>
	 					<div class="weui_cell_bd weui_cell_primary">
	 						<p><input name="people" type="checkbox" value="" data-pid="{{item.pId}}" data-positionid="{{item.positionId}}" data-type="{{item.type}}" data-name="{{item.name}}" data-email="{{item.email}}" data-phone="{{item.phone}}" data-userid="{{item.userId}}" {{getStatus(item.userId,item.positionId)}} /><span>{{item.name}}</span></p>
	 					</div>
	 					<div class="weui_cell_ft"></div>
	 				</div>
 				{{/each}}
 				
 			</div>
 			<!--常用联络人结束  -->
 		</div>
 </script>
 <script type="text/javascript" src="js/tree/tree2.js"></script>
</body>
</html>